<template>
	<view class="squareLayout pageBg">
		<z-paging ref="paging" v-model="tripData"  @query="queryList">
			<custom-nav-bar title="广场"></custom-nav-bar>		
			<view class="button-group">
				<view class="left">
					<image class="pic" src="../../static/images/过滤.png" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="button" :class="{ active: selected === -1 }" @click="select(-1)">全部</view>
					<view class="button" :class="{ active: selected === 0 }" @click="select(0)">车找人</view>
					<view class="button" :class="{ active: selected === 1 }" @click="select(1)">人找车</view>				
				</view>
	
			</view>
			<view class="content">
				<view class="item" v-for="item in tripData"  :key="item._id">
					<travel-item :item="item"></travel-item>
				</view>		
			</view>
		</z-paging>	
	</view>
</template>

<script setup>
import {ref} from 'vue';
const paging = ref(null);
const db = uniCloud.databaseForJQL()
const dbCmd = db.command
const selected = ref(-1); // 默认选中“全部”

const tripData = ref([]);	// 行程列表

const queryList = (pageNo, pageSize)=>{	
	getTripList(pageNo, pageSize);
}

const getTripList = async (pageNo, pageSize)=>{
	let now_ts = Date.now() 
	let skip = (pageNo - 1) * pageSize
	// filter = `start_time > ${Date.now()}`
	let filter = `start_time > ${Date.now()}`
	if(selected.value>=0){
		filter += `&&trip_type == ${selected.value}`
	}
	try{
		let {errCode,data} = await db.collection("trip-detail")
		.where(filter)
		// .where(`start_time > ${Date.now()}`) todo test
		.field("publish_date,last_modify_date,from_region,from_detail,to_region,to_detail,start_time,end_time,status,trip_type")
		.orderBy("start_time", "asc")
		.skip(skip)
		.limit(pageSize)
		.get();	
		if(errCode != 0) return;
		// 异步缓存数据
		// await cacheDataAsync(data);
		paging.value.complete(data);	// 触底刷新
	}catch(e){
		console.log("error:", e);
		paging.value.complete(false);
	}
}


const select = (option) => {
	selected.value = option; // 更新选中状态
	console.log("selected.value", selected.value);
	paging.value.reload();
};
</script>

<style lang="scss" scoped>
.squareLayout{
	/* 按钮均匀分布 */
	padding: 20rpx 0;
	.button-group {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 20rpx;
		.left{
			width: 45rpx;
			height: 45rpx;
			.pic{
				width: 100%;
				height: 100%;
			}
			margin-right: 20rpx;
		}	
		.right{
			display: flex;
			/* 使用 Flexbox 布局 */
			justify-content: flex-start;
			/* 上下间距 */	
			.button {
				padding: 6rpx 20rpx;
				margin-right: 20rpx;
				/* 按钮内边距 */
				border: none;
				/* 移除默认边框 */
				border-radius: 25rpx;
				/* 圆角 */
				background: linear-gradient(135deg, #4CAF50, #81C784);
				/* 渐变背景色 */
				color: #fff;
				/* 文字颜色 */
				font-size: 28rpx;
				/* 字体大小 */
				cursor: pointer;
				/* 鼠标指针样式 */
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
				/* 阴影效果 */
				transition: all 0.3s;
				/* 过渡效果 */
			}
			
			.button:hover {
				background: linear-gradient(135deg, #388E3C, #66BB6A);
				/* 悬停时的渐变背景色 */
			}
			
			.button.active {
				background: linear-gradient(135deg, #007aff, #66aaff);
				/* 选中状态背景色 */
				box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
				/* 选中状态阴影效果 */
			}
		}
			
	}
	.content{
		margin-top: 30rpx;
		padding: 0 30rpx;
		display: grid;		// 网格布局
		gap: 30rpx;
		grid-template-columns: repeat(1, 1fr);
	}
}

</style>